<template>
  <div class="rq">
      <el-input @keyup.enter.native="fetch(serchCPN)" placeholder="请输入菜品名" v-model="serchCPN" clearable @clear="fetch()">
        <el-button slot="append" icon="el-icon-search" @click="fetch(serchCPN)"></el-button>
      </el-input>
    <div class="item" v-for='(item, index) in caipin' :key='index'>
      <div class="details">
        <img :src="item.imgurl">
        <div class="details-list">
          <span>{{item.cp_name}}</span>
          <div class="list-more">
            <span>介绍：{{item.mssage}}</span>
          </div>
          <div class="list-price">
            ￥{{item.price}}/份
          </div>
        </div>
      </div>
      <div class="num">
        <span></span>
        <div>
          <el-button class="jiaru" @click="addCar(index)">加入购物车</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      serchCPN: '',
      caipin: [],
      cars: [],
      num: 0
    }
  },
  methods: {
    async fetch (val) {
      const { data: res } = await this.$http.get(`cdzc?cpname=${val}`)
      if (res.meta.status !== 200) {
        return this.$message.error('获取菜单信息失败！')
      }
      this.caipin = res.caipinxx
    },
    ...mapActions(['addGoods']),
    addCar: function(index) {
      var item = this.caipin[index]
      this.addGoods(item)
    }
  },
  created () {
  },
  mounted () {
  }

}
</script>

<style type="text/css">

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.rq {
  background: #fff;
}
.item {
  padding: 10px;
}
.rq>.item + .item{
  border-top: 1px solid #ccc;
}
.details {
  background: #f5f5f5;
  padding: 15px;
  display: flex;
  font-size: 15px;
}
.details img {
  width: 70px;
  height: 70px;
}
.details-list {
  margin-left: 15px;
  color: #888;
}
.list-more span {
  display:block;
  color: #ccc;
}
.list-price {
  font-size: 15px;
  color: red;
}
.num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.num .jiaru {
  font-size: 5px;
  width: 100px;
  height: 33px;
  background:red;
  color:#fff;
  outline: none;
}

</style>
